<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="home"><TopViews /></div>
    <MiddleViews />
    <BottomViews />
  </el-card>
</template>

<script lang="ts">
// import { defineComponent } from "vue";
export default {
  name: "Home",
};
</script>
<script lang="ts" setup>
import TopViews from "./TopViews/index.vue";
import MiddleViews from "./TopViews/MiddleViews.vue";
import BottomViews from "./TopViews/BottomViews.vue";

import { onMounted } from "vue";
import useReportDataStore from "@/stores/reportData";

const reportDataStore = useReportDataStore();

const { getReportData } = reportDataStore;

onMounted(() => {
  getReportData();
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 30px;
}
</style>
